<template>
	<view>
		<view class="user-box">
			<view class="print-cells">
				<view class="print-cell">
					<view class="print-cell__hd">
						<view class="print-cell__title">
							选择颜色
						</view>
					</view>
					<view class="print-cell__bd print-cell__border">
						<view class="pick-group">
							<view class="pick-box" :class="[{open:flag==index},item]" v-for="(item,index) in dots"
								:key="index" @click="handClick(index)">
								<view class="pick-dot"></view>
								<text class="iconfont icon-locationiconsuccess"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="print-cell">
					<view class="print-cell__hd">
						<view class="print-cell__title">
							A面内容
						</view>
					</view>
					<view class="print-cell__bd print-cell__border">
						<u-input v-model="value1" placeholder="请输入A面内容" :height="60" />
					</view>
				</view>
				<view class="print-cell">
					<view class="print-cell__hd">
						<view class="print-cell__title">
							B面内容
						</view>
					</view>
					<view class="print-cell__bd">
						<u-input v-model="value2" type="textarea" :border="true" :height="234" :auto-height="true"
							placeholder="请输入B面内容" />
						<button type="default" class="pick-btn" @click="show = true">选择</button>
					</view>
				</view>
				<view class="print-cell">
					<view class="print-cell__hd">
						<view class="print-cell__title">
							数量
						</view>
					</view>
					<view class="print-cell__bd">
						<view class="print-number">
							<u-number-box v-model="value3"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="print-foot">
				<button type="default" class="print-btn">打印</button>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="tab">
				<view class="tab-side">
					<view class="nav">
						<view class="nav-item" v-for="(item,index) in list" :key="index" @click="change(index)"
							:class="{active:current==index}">
							<view class="title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<view class="tab-content">
					<view v-if="current == 0">
						<view class="tab-card">
							<view class="head">
								<view class="title">
									内涵
								</view>
							</view>
							<view class="body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="group">
										<view class="item" v-for="(item,index) in 100" :key="index">
											星星之火可以燎原，我的火机我的火种
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="current == 1">
						<view class="tab-card">
							<view class="head">
								<view class="title">
									励志
								</view>
							</view>
							<view class="body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="group">
										<view class="item" v-for="(item,index) in 100" :key="index">
											星星之火可以燎原，我的火机我的火种
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="current == 2">
						<view class="tab-card">
							<view class="head">
								<view class="title">
									搞笑
								</view>
							</view>
							<view class="body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="group">
										<view class="item" v-for="(item,index) in 100" :key="index">
											<view class="ellipsis flex_bd">
												星星之火可以燎原，我的火机我的火种
											</view>
											<button type="default" class="btn del-btn">
												<text class="iconfont icon-shanchu"></text>
											</button>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="current == 3">
						<view class="tab-card">
							<view class="head">
								<view class="title">
									我的
								</view>
							</view>
							<view class="body">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view class="group">
										<view class="item" v-for="(item,index) in 100" :key="index">
											<view class="ellipsis flex_bd">
												星星之火可以燎原，我的火机我的火种
											</view>
											<button type="default" class="btn del-btn" @click="handelete(index)">
												<text class="iconfont icon-shanchu"></text>
											</button>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				value3: 5,
				dots: ['dot-errer', 'dot-primary', 'dot-warn', 'dot-success', 'dot-defult'],
				flag: 2,
				show: false,
				list: [{
					title: '内涵'
				}, {
					title: '励志'
				}, {
					title: '搞笑',
				}, {
					title: '我的',
				}],
				current: 0
			}
		},
		onLoad() {

		},
		methods: {
			handClick(index) {
				this.flag = index
			},
			change(index) {
				this.current = index;
			},
			handelete(index){
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-box {
		padding: 90rpx 30rpx 0;
		background-image: linear-gradient(to top right, #0b51a2, #009fe8);
		background-size: 100% 230rpx;
		background-repeat: no-repeat;
	}

	.print-cells {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 0 20rpx;
		box-shadow: 6rpx 6rpx 18rpx rgba(0, 53, 293, 0.07);

		.print-cell {

			.print-cell__hd {
				padding: 40rpx 0 20rpx;
				line-height: 1;
			}

			.print-cell__title {
				font-size: 30rpx;
				color: #40444e;
			}

			.uni-input-placeholder {
				top: 10rpx !important;
			}

			.print-cell__border {
				border-bottom: 1rpx solid rgb(220, 223, 230);
			}

			.print-cell__bd {
				position: relative;

				.pick-btn {
					padding: 0;
					width: 102rpx;
					height: 58rpx;
					font-size: 32rpx;
					color: #fff;
					background-color: #248ee8;
					border-radius: 10rpx;
					line-height: 58rpx;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}

				.pick-btn::after {
					display: none;
				}

				.print-number {
					padding: 30rpx 0 40rpx;
				}
			}
		}

	}

	.print-foot {
		margin-top: 160rpx;

		.print-btn {
			background-color: #248ee8;
			color: #fff;
			box-shadow: 4rpx 5rpx 10rpx rgba(0, 18, 152, 0.15);
			display: block;
			height: 80rpx;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			line-height: 80rpx;
		}

		.print-btn::after {
			display: none;
		}
	}

	.pick-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 15rpx;
	}

	.pick-box {
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #e2e8ec;
		border-radius: 50%;
		padding: 15rpx;
		position: relative;
	}

	.pick-dot {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		box-shadow: 0 -2rpx 2rpx rgba(0, 0, 0, 0.5) inset;
	}

	.dot-errer .pick-dot {
		background-color: #ff3350;
	}

	.dot-primary .pick-dot {
		background-color: #057fcb;
	}

	.dot-warn .pick-dot {
		background-color: #ffc320;
	}

	.dot-success .pick-dot {
		background-color: #23d254;
	}

	.dot-defult .pick-dot {
		background-color: #ffffff;
	}

	.dot-errer .iconfont {
		color: #ff3350;
	}

	.dot-primary .iconfont {
		color: #057fcb;
	}

	.dot-warn .iconfont {
		color: #ffc320;
	}

	.dot-success .iconfont {
		color: #23d254;
	}

	.dot-defult .iconfont {
		color: #333;
	}

	.dot-defult {
		background-color: #f1f1f1;
	}

	.pick-box .iconfont {
		font-size: 32rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		display: none;
	}

	.open .iconfont {
		display: block;
	}

	.open.dot-warn {
		border-color: #ffc320;
	}

	.open.dot-errer {
		border-color: #ff3350;
	}

	.open.dot-primary {
		border-color: #057fcb;
	}

	.open.dot-success {
		border-color: #23d254;
	}

	.open.dot-defult {
		border-color: #666666;
	}

	.tab {
		position: relative;
	}

	.tab-side {
		width: 170rpx;
		background-color: #f7f7f7;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
	}

	.tab-content {
		position: relative;
		margin-left: 170rpx;
	}

	.nav-item {
		height: 112rpx;
		font-size: 32rpx;
		color: #2e2e2e;
		text-align: center;
		line-height: 112rpx;
	}

	.nav-item.active {
		background-color: #fff;
		font-weight: bold;
	}

	.tab-card {
		padding: 40rpx 30rpx 0;

		.head {
			margin-bottom: 40rpx;

			.title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.body {
			.group {
				.item {
					font-size: 26rpx;
					color: #4f4f4f;
					line-height: 62rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.scroll-Y {
		height: 680rpx;
	}

	.del-btn {
		background-color: transparent;
		width: 50rpx;
		text-align: center;
		padding: 8rpx;
		margin: 0;
		line-height: 1.5;
		height: 50rpx;

		.iconfont {
			color: #398cd2;
			font-size: 24rpx;
			display: block;
		}
	}
</style>
